<template>
  <router-view />
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useUserStore } from '@/pinia/modules/user';
import { getSetting, getSubsystem, clearDictionary, clearOrganization } from '@/utils/system';
import { useMenuBadgeStore } from '@/business/pinia/menuBadge';
import {
  clearPage,
  clearPageComp,
  clearPageButton,
  clearDataForm,
  clearDataTable,
  clearDataField
} from '@/utils/codeless';
import emitter from "@/utils/bus";
import websocket from '@/utils/websocket';
import { changePrimaryStyle, loadTheme } from '@/utils/theme';
import { ElMessage } from "element-plus";
import tool from "@/utils/tool";

const userStore = useUserStore();
const menuBadgeStore = useMenuBadgeStore();

const loadUserTheme = (subsystemId, user) => {
  let data = null;
  if (user.theme && user.theme.startsWith("[")) {
    const themeList = JSON.parse(user.theme);
    data = themeList.find(item => item.subsystemId === subsystemId);
    if (!data) {
      data = themeList.find(item => item.subsystemId === 'all');
    }
  }

  if (data) {
    if (data.custom) {
      loadTheme('global', 'default');
      changePrimaryStyle(data.themeColor);
    } else {
      loadTheme('global', data.theme || 'default');
    }
    loadTheme('menu', data.menuColor || 'black');
  } else {
    loadTheme('global', 'default');
    loadTheme('menu', 'default');
  }
};

onMounted(async() => {
  const user = await userStore.initUserInfo();
  if (!user) {
    window.location.href = tool.getBaseUrl() + '/';
    return;
  }

  getSetting().then(setting => {
    if (setting && setting.extendsCss) {
      let style = document.createElement("style");
      style.textContent = setting.extendsCss;
      document.head.appendChild(style);
    }
  });

  getSubsystem().then(subsystem => {
    loadUserTheme(subsystem.id, user);

    document.title = subsystem.name || '';
    if (subsystem && subsystem.extendsCss) {
      let style = document.createElement("style");
      style.textContent = subsystem.extendsCss;
      document.head.appendChild(style);
    }

    menuBadgeStore.initMenuBadge(subsystem.badgeScriptId);
  });

  const urlParams = new URLSearchParams(window.location.search);
  const subsystemId = urlParams.get('subsystemId');

  websocket.connect();
  websocket.addTopics([
    "subscribe.model.data.change",
    "subscribe.menu.data.change",
    "subscribe.dictionary.change",
    "subscribe.page.change",
    "subscribe.page-button.change",
    "subscribe.page-comp.change",
    "subscribe.data-table.change",
    "subscribe.data-form.change",
    "subscribe.data-field.change",
    "subscribe.message.send.all.all",
    "subscribe.message.send.all." + user.id,
    "subscribe.message.send." + subsystemId + ".all",
    "subscribe.message.send." + subsystemId + "." + user.id,
  ]);

  emitter.off("model.data.change.0193138e0cec011e027a", () => clearOrganization());
  emitter.on("model.data.change.0193138e0cec011e027a", () => clearOrganization());

  emitter.off("dictionary.change", () => clearDictionary());
  emitter.off("page.change", () => clearPage());
  emitter.off("page-button.change", () => clearPageButton());
  emitter.off("page-comp.change", () => clearPageComp());
  emitter.off("data-table.change", () => clearDataTable());
  emitter.off("data-form.change", () => clearDataForm());
  emitter.off("data-field.change", () => clearDataField());

  emitter.on("dictionary.change", () => clearDictionary());
  emitter.on("page.change", () => clearPage());
  emitter.on("page-button.change", () => clearPageButton());
  emitter.on("page-comp.change", () => clearPageComp());
  emitter.on("data-table.change", () => clearDataTable());
  emitter.on("data-form.change", () => clearDataForm());
  emitter.on("data-field.change", () => clearDataField());

  if (window && window.matchMedia("(orientation: portrait)").matches) {
    ElMessage({message: "请将您的设备切换到横屏模式以获得最佳体验。", type: 'success', duration: 15000});
  }
});

onUnmounted(() => {
  emitter.off("dictionary.change", () => clearDictionary());
  emitter.off("page.change", () => clearPage());
  emitter.off("page-button.change", () => clearPageButton());
  emitter.off("page-comp.change", () => clearPageComp());
  emitter.off("data-table.change", () => clearDataTable());
  emitter.off("data-form.change", () => clearDataForm());
  emitter.off("data-field.change", () => clearDataField());
});
</script>